<style>
  #calendar { margin: 0 0 30px; }
  .container-fluid { padding: 0 }
</style>

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
      <div class="row-fluid show-grid">
        <h5>{{hours_a_day}}</h5>
        <h1 id="hours_a_day">X</h1>
      </div>
      <div class="row-fluid show-grid">
        <h5>{{hours_a_week}}</h5>
        <h1 id="hours_a_week">XX</h1>
      </div>

    </div>
    <div class="span10">
      <div id="calendar"></div>
      <!--Body content-->
    </div>
  </div>
</div>



<script>

  //get data
  var stats = {
    select_day: function(pointer) {

      if (!pointer) {
        pointer = $('.fc-today');
      }
      var startDate = $('#calendar').fullCalendar('getView').visStart;
      var offset = pointer.attr('class').replace(/\D/g, '');
      var curDate=new Date(
      startDate.getFullYear(),
      startDate.getMonth(),
      startDate.getDate()+offset*1,
      0,0,0,0);
      
      
        
      var pulledEvents = $('#calendar').fullCalendar('clientEvents');
      var weekEvent = false;

      var dif_mon = (curDate.getDay() + 6) % 7; // Number of days to subtract
      var monday = new Date(curDate - dif_mon * 24*60*60*1000); // + fialed
      var dif_sun = (7-curDate.getDay()) % 7;
      var sunday = new Date(curDate.getFullYear(), curDate.getMonth(), curDate.getDate()+dif_sun, 0, 0, 0, 0);

      for(var i = 0; i < pulledEvents.length; i++){
        // create a new date object from the start of the pulled event
        var testEventDate = new Date(pulledEvents[i].start);
        // zero its time for comparison
        testEventDate.setHours(0);
        testEventDate.setMinutes(0);
        testEventDate.setSeconds(0);
        testEventDate.setMilliseconds(0);

        if (!weekEvent && testEventDate.getTime() >= monday.getTime() && testEventDate.getTime() <= sunday.getTime()) {
          var weekEvent = pulledEvents[i];
        }

        if(testEventDate.getTime() == curDate.getTime()){
          var datEvent = pulledEvents[i];
          break;
        }
      }
        
      if (datEvent) {
        $('#hours_a_day').text(datEvent.hours_a_day);
        $('#hours_a_week').text(datEvent.hours_a_week);
      } else if (weekEvent) {
        $('#hours_a_day').text('X');
        $('#hours_a_week').text(weekEvent.hours_a_week);
      } else {
        $('#hours_a_day').text('X');
        $('#hours_a_week').text('XX');
      }


      $('.fc-widget-content').removeClass('alert-info');
      pointer.addClass('alert-info');
    }
  }

  $(function(){
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    var calendar = $('#calendar').fullCalendar({
      header: {
        left: '',
        center: 'title',
        right: 'today prev,next'
      },
      editable: false,
      firstDay: 1,
      events: {
        url: '/stats/data',
        data: {
          offset_in_secs: (function() { var x = new Date(); return -x.getTimezoneOffset()*60;})()
        },
        error: function() {
                error('Reload page please');
            }
      },
      loading: function (bool) {
        if (bool) {} else {
          stats.select_day(false);
        }
      },
      viewDisplay: function(view) {

        $('.fc-widget-content').removeClass('alert-info');

        $(".fc-widget-content").hover(function(){
          stats.select_day($(this));
        });

        var today = $('.fc-today');
        if (today && today.length>0) {
          stats.select_day(today);
        }
      },
      {{creepy_script}}
    });
  });




</script>